<template>
  <div class="section-container-1">
    <div class="header">
      <bannerHeader @open="open" @select="select" />
    </div>
    <div class="chart" ref="chart"></div>
  </div>
</template>

<script>
import bannerHeader from "../banner-header-left";
import echarts from "echarts";
import UIfn from "./popup";
import { mapState } from "vuex";
import request from "@/utils/request";
import Qs from "qs";
export default {
  components: {
    bannerHeader,
  },
  data() {
    return {
      type: "1",
    };
  },
  computed: {
    ...mapState("reportFormDark", ["deptId", "projectId"]),
  },
  watch: {
    deptId: {
      handler(val) {
        this.$nextTick(() => {
          this.select(this.type); //开票与收款
        });
      },
      immediate: true,
    },
    projectId: {
      handler(val) {
        this.$nextTick(() => {
          this.select(this.type); //开票与收款
        });
      },
    },
  },
  mounted() {},
  methods: {
    drawInvoiceCollection1() {},
    open() {
      UIfn(this);
    },
    select(type) {
      this.type = type;
      if (type === "1") {
        this.screenInvoiceAndCollectionMonth();
      } else {
        this.screenInvoiceAndCollectionYear();
      }
    },
    screenInvoiceAndCollectionMonth(deptId = this.deptId) {
      request({
        url: "/system/screen/invoiceAndCollectionMonth",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId,
          year: new Date().getFullYear(),
          projectId: this.projectId,
        }),
      }).then((res) => {
        const x = [];
        const y1 = [];
        const y2 = [];
        for (let i = 0; i < 12; i++) {
          x.push(`${i + 1}月`);
        }
        for (const i in res.data) {
          let data = [0, 0];

          if (res.data[i]) {
            data = res.data[i].split("|");
          }
          y1.push((Number(data[0]) / 10000).toFixed(4) || 0);
          y2.push((Number(data[1]) / 10000).toFixed(4) || 0);
        }
        this.drawInvoiceCollection("1", y1, y2, x);
      });
    },
    screenInvoiceAndCollectionYear(deptId = this.deptId) {
      request({
        url: "/system/screen/invoiceAndCollectionYear",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId,
          projectId: this.projectId,
        }),
      }).then((res) => {
        const x = [];
        const y1 = [];
        const y2 = [];
        for (const i in res.data) {
          x.push(i);
          let data = [0, 0];

          if (res.data[i]) {
            data = res.data[i].split("|");
          }
          y1.push((Number(data[0]) / 10000).toFixed(4) || 0);
          y2.push((Number(data[1]) / 10000).toFixed(4) || 0);
        }
        this.drawInvoiceCollection("2", y1, y2, x);
      });
    },
    drawInvoiceCollection(type = "1", yData1, yData2, xData) {
      // 开票与收款
      // console.log(this.configurationInformation);
      // this.configurationInformation.invoiceCollection = {
      //   ...this.configurationInformation.invoiceCollection,
      //   xData,
      //   yData1,
      //   yData2,
      // };
      // this.$refs.invoiceCollection.draw(
      //   this.configurationInformation.invoiceCollection
      // );
      this.$nextTick(() => {
        this.init(yData1, yData2, xData);
      });
    },
    init(yData1, yData2, xData) {
      const chart = echarts.init(this.$refs.chart);
      // chart.clear(); //每次绘制清除一次画布
      // this.echartInit = chart;
      const option = {
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   data: ["开票", "收款"],
        //   x: "top",
        //   y: "left",
        //   padding: [10, 0, 0, 16],
        //   textStyle: {
        //     fontSize: 14,
        //     color: "rgba(0,0,0,.48)",
        //   },
        //   icon: "circle",
        //   itemWidth: 12,
        //   itemHeight: 12,
        //   itemGap: 12,
        // },
        grid: {
          top: "20",
          left: "0",
          right: "20",
          bottom: "0",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0, 51, 128, 1)",
          borderColor: "rgba(0, 79, 197, 1)",
          borderWidth: 2,
          padding: 10,
          textStyle: {
            color: "#8FC7FF",
          },
          formatter: function (params) {
            let time = `${new Date().getFullYear()}年${params[0].axisValue}`;
            if (params[0].axisValue.length > 3) {
              time = `${params[0].axisValue}年`;
            }
            const tip1 = `${params[0].marker}开票:${params[0].value}万元`;
            const tip2 = `${params[1].marker}收款:${params[1].value}万元`;
            return `${time}</br>${tip1}</br>${tip2}`;
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisTick: {
            show: false,
          },

          axisLine: {
            lineStyle: {
              // 设置轴颜色
              color: "rgba(143, 199, 255, .16)",
            },
          },
          axisLabel: {
            color: "rgba(143, 199, 255, .48)", //x轴文本颜色
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          //网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(0,0,0,.04)"],
              width: 1,
              type: "solid",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.48)",
            },
          },
          axisLabel: {
            color: "rgba(143, 199, 255, .48)", //x轴文本颜色
          },
          //   show:false,
        },
        series: [
          {
            name: "开票",
            type: "line",
            symbol: "circle",
            color: "#E54539",
            data: yData1,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2, //设置线条粗细
                },
              },
            },
            lineStyle: {
              shadowColor: "rgba(229, 69, 57, .08)",
              shadowBlur: 3,
              shadowOffsetY: 12,
            },
          },
          {
            name: "收款",
            type: "line",
            symbol: "circle",
            color: "#35BCEF",
            data: yData2,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2, //设置线条粗细
                },
              },
            },
            lineStyle: {
              shadowColor: "rgba(53, 188, 239, 0.16)",
              shadowBlur: 3,
              shadowOffsetY: 12,
            },
          },
        ],
      };
      chart.setOption(option);
      const resize = window.addEventListener("resize", () => {
        this.$nextTick(() => {
          setTimeout(() => {
            chart.resize();
          }, 500);
        });
      });
      this.$once("hook:beforeDestroy", () => {
        window.removeEventListener("resize", resize);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/report_form_dark/styles/fn.scss";

.section-container-1 {
  width: 100%;
  height: 100%;

  .header {
    width: 100%;
    height: vh(42);
  }

  .chart {
    width: 100%;
    height: calc(100% - #{vh(42)});
  }
}
</style>